<template>
    <div class="red-scroll-list">
        <scroll-list
                :data="data"
                :index="prev_index"
                @changed="changed"
        >
        </scroll-list>

        <!--S子页面-->
        <transition :name="transition_name">
            <router-view class="main-child"/>
        </transition>
        <!--E子页面-->
    </div>
</template>

<script>
// 红包滚动列表
import ScrollList from "@c/scroll-list"
export default {
    name: "red-scroll-list",
    data() {
        return {
            // 页面切换动画
            transition_name: 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s',
            // 红包id
            red_id: '',
            // 红包列表数据
            data: [],
            // 请求下标
            limit: [0,10],
            // 上一个红包下标
            prev_index: 0,
            // 上一次上拉加载的红包下标位置
            loading_index: 0
        }
    },
    beforeRouteUpdate (to, from, next) {
        this.transition_name = to.path.split('/').length < from.path.split('/').length ? 'change-path animate__animated animate__slideOutRight animate__faster animate__delay-2s' : 'change-path animate__animated animate__slideInRight animate__faster animate__delay-2s'
        setTimeout(() => {
            next()
        },10)
    },
    components: {
        ScrollList
    },
    created() {
        this.red_id = this.$route.params.red_id
    },
    mounted() {
        this.getList()
    },
    methods: {
        /**
         * 获取红包列表
         */
        getList() {
            return this.$sendGet("red/member/list",{
                limit: this.limit,
                enter_red_id: this.red_id
            })
                .then((res) => {
                    let data = res.data.data
                    if(data.length > 0) {
                        this.data.push(...data)
                        this.limit[0] += this.limit[1];
                    }
                })
        },
        /**
         *红包切换完成
         */
        changed(index) {
            //加载新的数据
            if(this.prev_index < index){
                if(this.data.length-index === 5 && index > this.loading_index){
                    this.getList();
                    this.loading_index = index;
                }
            }
            this.prev_index = index;
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    @import "@/common.less";
</style>
